<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/beas.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="bootstrap-4.6.2-dist/js/jquery-3.5.1.slim.min.js"></script>
    <script src="bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
    <title>实训作业</title>
</head>

<body>
    <header>
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-md bg-warning navbar-dark">
            <a class="navbar-brand" href="login&register.html">
                <!-- logo -->
                <img src="img/logo.jpg" style="width: 40px;">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navtop">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navtop">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
                            aria-expanded="false">
                            热爱美味
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">汉堡/小食</a>
                            <a class="dropdown-item" href="#">甜品/饮品</a>
                            <a class="dropdown-item" href="#">健康早餐</a>
                            <a class="dropdown-item font-weight-bold" href="#">开心乐园餐</a>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
                            aria-expanded="false">
                            随时随地
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">亲子活动</a>
                            <a class="dropdown-item" href="#">麦当劳会员</a>
                            <a class="dropdown-item" href="#">权益卡</a>
                            <a class="dropdown-item font-weight-bold" href="#">用餐体验</a>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
                            aria-expanded="false">
                            美好未来
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">汉堡大学</a>
                            <a class="dropdown-item" href="#">麦胞故事</a>
                            <a class="dropdown-item" href="#">工作机会</a>
                            <a class="dropdown-item font-weight-bold" href="#">麦麦影响力中心</a>
                        </div>
                    </li>
                    <li id="username" class="nav-link text-danger"></li>
                </ul>

                <ul class="navbar-nav ml-md-auto">
                    <!-- 找餐厅 -->
                    <li class="nav-item">
                        <a class="nav-link font-weight-bold" href="map.html" target="_blank" rel="noopener">找餐厅</a>
                    </li>

                    <!-- 麦乐送 -->
                    <li class="nav-item dropdown">
                        <button class="btn btn-outline-danger" data-toggle="dropdown" aria-expanded="false">
                            <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                            麦乐送
                        </button>
                        <div class="dropdown-menu dropdown-menu-md-right">
                            <img src="img/EWM.png" class="w-100">
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <!-- 轮播图 -->
    <div class="slide-box banner">
        <div class="banner-box"></div>
        <button class="slide-left-btn material-icons">arrow_back_ios</button>
        <button class="slide-right-btn material-icons">arrow_forward_ios</button>
        <div class="pagination-box"></div>
    </div>
    <script src="js/index.js"></script>

    <!-- 滚动条 -->
    <div class="progress container">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar"
            aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100" style="width: 12.5%"></div>
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar"
            aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100" style="width: 12.5%"></div>
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar"
            aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100" style="width: 12.5%"></div>
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar"
            aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100" style="width: 12.5%"></div>
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar"
            aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100" style="width: 12.5%"></div>
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar"
            aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100" style="width: 12.5%"></div>
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar"
            aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100" style="width: 12.5%"></div>
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar"
            aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100" style="width: 12.5%"></div>
    </div>

    <!-- 侧边导航 -->
    <div class="elevator">
        <ul class="elevator-list elevator-ul">
            <li><a class="elevator-a" href="javascript:;" data-name="hb">汉堡</a></li>
            <li><a class="elevator-a" href="javascript:;" data-name="yp">饮品</a></li>
            <li><a class="elevator-a" href="javascript:;" data-name="xs">小食</a></li>
            <li><a class="elevator-a" href="javascript:;" data-name="tp">甜品</a></li>
            <li><a class="elevator-a" href="javascript:;" id="backTop">返回顶部</a></li>
        </ul>
    </div>
    <!-- 内容 -->
    <div class="container pb-3" style="border-bottom: 2px solid slategrey;">
        <div class="hb">
            <h2 class="text-danger font-weight-bold">汉堡</h2>
            <div class="marquee">
                <span class="marquee-text">饮食需要多样、搭配与适度，选择麦当劳美食，计算一餐麦当劳的营养信息，更好地搭配你一天的膳食！</span>
            </div>
            <div class="pt-1" style="border-bottom: 2px solid slategrey;"></div>
            <div class="row row-cols-md-4 row-cols-sm-2 row-cols-2 pt-3">
                <div class="card col-xl-3">
                    <img src="img/hb1.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">巨无霸</h5>
                        <p class="card-text">传承50年的经典之选！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/hb2.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">汉堡包</h5>
                        <p class="card-text">100%纯牛肉！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/hb3.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">麦辣鸡腿汉堡</h5>
                        <p class="card-text">为“中国胃”研发的当家产品！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/hb4.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">原味板烧鸡腿堡</h5>
                        <p class="card-text">0油原块鸡排嫩滑多汁！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/hb5.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">麦香鸡</h5>
                        <p class="card-text">清脆爽口的生菜！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/hb6.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">麦香鱼</h5>
                        <p class="card-text">深海鳕鱼烹制而成的鳕鱼饼！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/hb7.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">吉士汉堡包</h5>
                        <p class="card-text">纯牛肉与香软芝士融为一体！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/hb8.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">双层吉士汉堡</h5>
                        <p class="card-text">两倍滋味诱惑！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
            </div>
        </div>


        <div class="yp">
            <h2 class="text-danger font-weight-bold">饮品</h2>
            <div class="marquee">
                <span class="marquee-text">饮品多样就选麦当劳，每日有各种优惠饮品供您选择，日日不重样日日有惊喜！</span>
            </div>
            <div class="pt-1" style="border-bottom: 2px solid slategrey;"></div>
            <div class="row row-cols-md-4 row-cols-sm-2 row-cols-2 pt-3">
                <div class="card col-xl-3">
                    <img src="img/yp1.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">可口可乐</h5>
                        <p class="card-text">搭配正餐好带劲！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/yp2.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">零度可口可乐</h5>
                        <p class="card-text">无糖畅爽尽释美妙！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/yp3.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">阳光柠檬红茶</h5>
                        <p class="card-text">甜蜜口感，清新滋润！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/yp4.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">雪碧</h5>
                        <p class="card-text">搭配正餐好带劲！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/yp5.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">原味珍珠奶茶</h5>
                        <p class="card-text">丝滑奶茶搭配软糯珍珠！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/yp6.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">美汁源阳光橙</h5>
                        <p class="card-text">维他命+纤维！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/yp7.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">美汁源100%苹果汁</h5>
                        <p class="card-text">100%苹果汁，纸盒包装！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/yp8.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">优品豆浆</h5>
                        <p class="card-text">传统中式饮品！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
            </div>
        </div>


        <div class="xs">
            <h2 class="text-danger font-weight-bold">小食</h2>
            <div class="marquee">
                <span class="marquee-text">全线薯条单品买一送一是指单独购买一份薯条产品，免费送一份同款同规格薯条，买一送一活动不与其他优惠同时适用，不适用麦乐送送餐服务！</span>
            </div>
            <div class="pt-1" style="border-bottom: 2px solid slategrey;"></div>
            <div class="row row-cols-md-4 row-cols-sm-2 row-cols-2 pt-3">
                <div class="card col-xl-3">
                    <img src="img/xs1.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">薯条</h5>
                        <p class="card-text">精选优质土豆！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/xs2.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">麦乐鸡 (5块)</h5>
                        <p class="card-text">严格挑选优质鸡肉！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/xs3.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">玉米杯</h5>
                        <p class="card-text">粒粒饱满，颗颗多汁！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/xs4.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">麦辣鸡翅</h5>
                        <p class="card-text">精选优质白羽鸡翅！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/xs5.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">那么大鸡排</h5>
                        <p class="card-text">融合成独特风味！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/xs6.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">苹果片</h5>
                        <p class="card-text">优选山东红富士！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/xs7.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">麦麦脆汁鸡（琵琶腿）</h5>
                        <p class="card-text">创新黑科技成就美式炸鸡！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/xs8.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">麦麦脆汁鸡（鸡胸）</h5>
                        <p class="card-text">创新黑科技成就美式炸鸡！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
            </div>
        </div>


        <div class="tp">
            <h2 class="text-danger font-weight-bold">甜品</h2>
            <div class="marquee">
                <span class="marquee-text">醇香细腻的冰淇淋搭配香脆圆筒，将清甜与松脆一口咬下！！</span>
            </div>
            <div class="pt-1" style="border-bottom: 2px solid slategrey;"></div>
            <div class="row row-cols-md-4 row-cols-sm-2 row-cols-2 pt-3">
                <div class="card col-xl-3">
                    <img src="img/tp1.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">圆筒冰淇淋</h5>
                        <p class="card-text">松脆一口咬下！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/tp2.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">朱古力新地</h5>
                        <p class="card-text">沉醉在醇厚的绵滑浓香！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/tp3.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">草莓新地</h5>
                        <p class="card-text">邂逅甜蜜回忆！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/tp4.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">麦旋风™奥利奥原味</h5>
                        <p class="card-text">创造无限新奇滋味！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/tp5.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">麦旋风™奥利奥草莓口味</h5>
                        <p class="card-text">混合不一样的清新口味！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/tp6.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">香芋派</h5>
                        <p class="card-text">简直幸福到爆啦！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
                <div class="card col-xl-3">
                    <img src="img/tp7.png" class="card-img-top w-auto" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">菠萝派</h5>
                        <p class="card-text">软软的夹心！</p>
                        <a href="#" class="btn btn-warning">了解更多</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <p class="text-center">&copy2024 McDONALD'S. All Rights Reserved</p>
        <p class="text-center"><a href="#">隐私政策</a> | <a href="#">使用条款</a> | <a href="#">会员协议</a> | <a href="#">联系我们</a>
            | <a href="#">关注我们</a></p>
    </footer>
    <script src="js/scroll.js"></script>
    <script src="js/username.js"></script>
</body>

</html>